<script lang="ts" setup>
import { ref } from "vue";
import MyDialog from "@/components/MyDialog.vue";
import type { Card } from "@/types/Card";
import { STATIC_URL } from "@/configs/yz";
import suit_icon_dict from "@/assets/data/suit_icon_dict.json";

const show = ref(false);
const card = ref(null as Card | null);
const open = (props: { card: Card }) => {
	show.value = true;
	card.value = props.card;
};
defineExpose({ open });
</script>

<template>
	<MyDialog v-model:show="show">
		<div v-if="card" class="card-detail" @click.stop>
			<h1>{{ card.name }} ({{ suit_icon_dict[card.suit] }} {{ card.rank }})</h1>
			<img :src="STATIC_URL + card.src" alt="" />
			<p>{{ card.description }}</p>
		</div>
	</MyDialog>
</template>

<style lang="scss" scoped>
.card-detail {
	width: 80vw;
	height: 60vh;
	display: flex;
	flex-direction: column;
	background-color: #232323;
	padding: 20rem;
	border-radius: 10rem;
	color: #fff;
	row-gap: 10rem;
	overflow: auto;
	img {
		width: 75.9rem;
		height: 105.6rem;
		border-radius: 4rem;
		object-fit: cover;
	}
	h1 {
		flex-shrink: 0;
		font-size: 16rem;
	}
	p {
		font-size: 10rem;
	}
}
</style>
